<template>
    <div class="bg">
        <div class="container">
            <div class="head">
                <h3 class="tuijian">推荐节目</h3>
                <span>(每日更新)</span>
            </div>
            <ul class="music">
                <li :class="['music-item', index % 2 ? 'music-item-grey' : '']" v-for="(item, index) in music"
                    :key="item.id">
                    <a class="bfimg"><img class="imgi" :src="item.coverUrl" alt=""></a>
                    <div class="imgtitle" @click="hanleAudio(item.id)"><a>{{ item.name }}</a></div>
                    <div class="descp" @click="hanleAudio(item.id)"> <a>{{ item.radio.name }}</a></div>
                    <div class=" count-bf">播放{{ item.listenerCount }}</div>
                    <div class="count-zan">赞{{ item.likedCount }}</div>
                    <div class="tags"><a>{{ item.radio.category }}</a></div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import axios from "axios"
// 导入路由对象
import { useRouter } from 'vue-router'
onMounted(() => {
    axios.get("http://122.112.161.135:3000/program/recommend").then((res) => {
        /* console.log(res); */
        console.log(res.data.programs);
        music.value = res.data.programs
    })
})
const music = ref([])
// 实例化路由对象
const router = useRouter()
function hanleAudio(id) {
    // 传id`参数
    router.push({ path: '/radio', query: { id: id } })
}
</script>
<style lang="stylus" scoped>
.bg
  width:100%
  background: #f5f5f5
  display:flex
  justify-content: center
  .container
    width 966px
    background #fff
    border-left:1px solid #c1c1c1
    border-right:1px solid #c1c1c1
    border-bottom:1px solid #c1c1c1
    padding:40px
    margin-bottom:50px
    vertical-align:bottom
    .head
        width:100%
        height 42px
        border-bottom: 2px solid #c20c0c;
        .tuijian
            font-size:24px
            font-weight:520
            float left
            color:#000
        span
            float: left;
            margin: 16px 0 0 10px;
            color: #999;
            font-size: 12px;
.music
   list-style:none 
   margin:0
   padding:0
   .music-item
        width:100%
        height 60px
        padding 10px 0
        font-size 12px
        line-height 40px
        display:flex
        border-left:1px solid #c1c1c1
        border-right:1px solid #ddd
        &:hover
            background-color:#eeeeee
            .bfimg::after
                content: url('@/assets/播放.svg'); 
                scale:1.3
                position: absolute
                left 11px
                top  4px
        .bfimg
            margin:0 0 0 20px
            img
                width:40px
                height:40px
        .imgtitle
            width 304px
            margin-left:10px
            // 超出显示省略号
            white-space: nowrap;
            overflow:hidden
            text-overflow:ellipsis
        .descp
            width 166px
            margin-left:10px
            white-space: nowrap;
            overflow:hidden
            a
                color:#666
        .count-bf
            width 90px
            margin-left:10px
            color:#999
        .count-zan
            width 126px
            margin-left:10px
            color:#999
        .tags
            a
                color:#999
                border: 1px solid #bbbb
                padding:0 3px
                text-decoration:none
    .music-item-grey
        background-color:#f7f7f7
a:hover
    cursor:pointer
</style>